<template>
  <div>
    <el-upload
            class="upload-demo"
            :drag="drag"
            :action="action"
            :multiple="multiple"
            :auto-upload="autoUpload"
            :list-type="listType"
            :on-preview="handleOnPreview"
            :on-remove="handleOnRemove"
            :on-progress="handleOnProgress"
            :on-success="handleOnSuccess"
            :on-error="handleOnPreview"
            :on-exceed="handleOnPreview"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!--      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
    </el-upload>
  </div>
</template>

<script>
    export default {
      props: {
        /**
         * 文件上传地址
         */
        action: {
          type: String,
          required: true,
          default: 'https://jsonplaceholder.typicode.com/posts/'
        },
        /**
         * 是否支持多选文件
         */
        multiple: {
          type: Boolean,
          default: false
        },
        /**
         * 是否启用拖拽上传
         */
        drag: {
          type: Boolean,
          default: true,
        },
        /**
         * 是否显示已上传文件列表
         */
        showFileList: {
          type: Boolean,
          default: true
        },
        /**
         * 是否禁用
         */
        disabled: {
          type: Boolean,
          default: false
        },
        /**
         * 最大允许上传个数
         */
        limit: {
          type: Number,
          default: 5
        },
        /**
         * 是否在选取文件后立即进行上传
         */
        autoUpload: {
          type: Boolean,
          default: false
        },
        listType: {
          type: String,
          default: 'text',
          validator: function (value) {
            return ['text', 'picture', 'picture-card'].indexOf(value) !== -1
          }
        }
      },
      data() {
        return {}
      },
      methods: {
        /**
         * 点击文件列表中已上传的文件时的钩子
         * @param file
         */
        handleOnPreview(file) {
          console.log('[on-preview]', '点击了上传文件列表中的文件: ', file.name);
        },
        /**
         * 文件列表移除文件时的钩子
         * @param file
         * @param fileList
         */
        handleOnRemove(file, fileList) {
          console.log('[on-remove]', '从上传列表中移除了文件: ', file.name)
        },
        /**
         * 文件上传成功时的钩子
         * @param response
         * @param file
         * @param fileList
         */
        handleOnSuccess(response, file, fileList) {

        },
        /**
         * 文件上传失败时的钩子
         * @param err
         * @param file
         * @param fileList
         */
        handleOnError(err, file, fileList) {

        },
        /**
         * 文件上传时的钩子
         */
        handleOnProgress(event, file, fileList) {

        },
        /**
         * 文件超出个数限制时的钩子
         * @param files
         * @param fileList
         */
        handleOnExceed(files, fileList) {

        }

      }

    }
</script>

<style scoped>

</style>
